<template lang="pug">
  .mask(v-show='isShowc')
    .wrap
      .w-title
        .wt-add 添加单位
        .wt-close(@click="cancel()") ×
      .addcompany
        el-form(:model="ruleForm" :label-position="labelPosition" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm")
          el-form-item(label="所在地" prop="selectedOptions")
            //- el-input(v-model="ruleForm.cpanycode" placeholder="请输入单位码")
            el-cascader(
            :options="options"
            v-model="ruleForm.selectedOptions"
            @active-item-change="handleItemChange")
          
          el-form-item(label="单位名称" prop="cpanyname")
            el-input(v-model="ruleForm.cpanyname" placeholder="请输入单位名称")
          el-form-item(label="单位地区码" prop="regioncode")
            el-input(v-model="ruleForm.regioncode"  placeholder="请输入单位地区码" :disabled="isupdate")
          el-form-item(label="所属行业" prop="industry")
            el-select(v-model="ruleForm.industry" placeholder="所属行业")
              el-option(v-for="(i,j) in industrylist" :key="j" :label="i.industryName" :value="i.id" )
          el-form-item(label="单位级别" prop="level")
            el-select(v-model="ruleForm.level" placeholder="请选择活动区域")
              el-option(label="区县" :value=0)
              el-option(label="市级" :value=1)
              el-option(label="省级" :value=2)
          el-form-item(label="单位类型" prop="type")
            el-select(v-model="ruleForm.type" placeholder="请选择活动区域")
              el-option(label="试用" :value=0)
              el-option(label="正式" :value=1)
          el-form-item(label="使用时间")
            el-date-picker(v-model="ruleForm.dateval" type="datetime" placeholder="选择日期时间")
          el-form-item(label="单位联系人" prop="copaypersonal")
            el-input(v-model="ruleForm.copaypersonal" placeholder="请输入单位联系人")
          el-form-item(label="联系方式" prop="cpanyphone")
            el-input(v-model="ruleForm.cpanyphone" placeholder="请输入联系方式")
        .btns
          el-button(type="danger" @click="submitForm('ruleForm')" ) {{text()}}
          el-button(@click="cancel()" type="info") 取消
        //- div {{canpaylist}}{{isupdate}}
</template>
<script>
  import {mapGetters, mapActions} from 'vuex'
  
  export default {
    name: 'addcompany',
    props: ['company'],
    data() {
      return {
        isShowc: this.company,
        labelPosition: 'right',
        industrylist: [],
        options: [],
        ruleForm: {
          selectedOptions:[],
          cpanycode: '',
          cpanyname: '',
          regioncode: '',
          industry: '',
          level: '',
          type: '',
          dateval: '',
          copaypersonal: '',
          cpanyphone: '',
          index:0
        },
        list: {},
        rules: {
          selectedOptions: [
            {type: 'array',required: true, message: '请选择位置', trigger: 'blur'},
          ],
          cpanyname: [
            {required: true, message: '请输入单位名称', trigger: 'blur'},
          ],
          regioncode: [
            {required: true, message: '请输入单位地区码', trigger: 'blur'},
          ],
          industry: [
            {required: true, message: '请选择所属行业', trigger: 'change'}
          ],
          level: [
            {type: 'number', required: true, message: '请选择单位级别', trigger: 'change'}
          ],
          type: [
            {type: 'number', required: true, message: '请选择单位类型', trigger: 'change'}
          ],
          dateval: [
            {type: 'date', required: true, message: '请选择日期', trigger: 'change'}
          ],
          copaypersonal: [
            {message: '请输入单位联系人', trigger: 'blur'},
          ],
          cpanyphone: [
            {message: '请输入联系方式', trigger: 'blur'},
          ],
        }
      }
    },
    computed: {
      ...mapGetters([
        'canpaylist',
        'isupdate'
      ])
    },
    mounted() {
      this.setItem()
      this.queryindustry()
      this.getProvince()

    },
    methods: {
      ...mapActions([
        'canpayupdade'
      ]),
      text() {
        let t = this.isupdate == true ? '修改' : '保存'
        return t
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.addlist()
          } else {
            return false;
          }
        });
      },
      setItem() {
        if (this.isupdate == true) {
          this.ruleForm.cpanycode = this.canpaylist.organizationCode
          this.ruleForm.cpanyname = this.canpaylist.organizationName
          this.ruleForm.regioncode = this.canpaylist.areaCode
          this.ruleForm.industry = this.canpaylist.industryInvolved
          this.ruleForm.level = parseInt(this.canpaylist.corpLevel)
          this.ruleForm.type = parseInt(this.canpaylist.corpType)
          this.ruleForm.dateval = this.canpaylist.useTime
          this.ruleForm.copaypersonal = this.canpaylist.corpBy
          this.ruleForm.cpanyphone = this.canpaylist.corpPhone
        }
      },
      async addlist() {
        let [a,b,c] = this.ruleForm.selectedOptions
        let code = await this.$ajax.post('xyssoManager/corp/createNewCorpCode', {
          "province":a,
          "city":b,
          "area":c,
          "industryCode":this.ruleForm.industry
        })
        let list = {
          organizationCode: code.data,
          organizationName: this.ruleForm.cpanyname,
          areaCode: this.ruleForm.regioncode,
          industryInvolved: this.ruleForm.industry,
          corpLevel: this.ruleForm.level,
          corpType: this.ruleForm.type,
          useTime: this.ruleForm.dateval,
          corpBy: this.ruleForm.copaypersonal,
          corpPhone: this.ruleForm.cpanyphone,
        }
        let res
        if (this.isupdate == true) {
          list.id = this.canpaylist.id
          res = await this.$ajax.post('xyssoManager/corp/update', list)
        } else if (this.isupdate == false) {
          res = await this.$ajax.post('xyssoManager/corp/insert', list)
          await this.$refs['ruleForm'].resetFields();
        }
        let data = res.data        
        if (data.code == 200) {
          this.$message.success('添加成功')
          this.isShowc = false
          this.$emit("refreshList")
          this.$router.push('unitmanagement')
        }
      },
      cancel() {
        //this.$router.go(-1)
        this.isShowc = false
      },
      async queryindustry() {
        let res = await this.$ajax.get('xyssoManager/industry/queryAll')
        this.industrylist = res.data.data
      },
      async getProvince(){
        let citys = await this.$ajax.get('xyssoManager/region/queryProvince')
        let arr = citys.data.map(d => ({
          "label":d.province,
          "value":d.provinceID,
          "children":[]
        }))
        let _arr = '台湾省 香港特别行政区 澳门特别行政区'.split(' ')
        arr.map((d,i) => {
          if(_arr.indexOf(d.label)!=-1){
            delete arr[i].children
          }
          })
        this.options = arr
      },
      async getCity(id){
        let citys = await this.$ajax.get('xyssoManager/region/queryCityByParentId?parentId='+id)
        let arr = citys.data
        
        this.options.find((d,i) => {
          if(d.value ==id)
              this.index = i
        })
        this.options[this.index].children = arr.map(d => ({
          "label":d.city,
          "value":d.cityID,
          'children':[]
        }))
      },
      async getArea(id){
        let citys = await this.$ajax.get('xyssoManager/region/queryAreaByParentId?parentId='+id)
        let arr = citys.data
        let index
        this.options[this.index].children.find((d,i) => {
          if(d.value ==id)
              index = i
        })
        this.options[this.index].children[index].children = arr.map(d => ({
          "label":d.area,
          "value":d.areaID,
        }))
      },
      handleItemChange(val) {
        if(val.length > 1){
          this.getArea(val[1])
        }else{
          this.getCity(val[0])
        }
      }
      
    },
    watch: {
      company(cur) {
        if (cur == true) {
          this.isShowc = cur
        }
      },
    }
  }
</script>
<style lang="stylus" scoped>
  .mask
  //display none
    position fixed
    top 0
    left 0
    right 0
    bottom 0
    background rgba(0, 0, 0, 0.5)
    .wrap
      position absolute
      top 50%
      left 50%
      margin-left -200px
      margin-top -341px
      width 400px
      height 682px
      background white
      border-radius 5px
      .w-title
        height 50px
        line-height 50px
        border-bottom 1px solid #eaeaea
        color #333333
        .wt-add
          float left
          font-size 16px
          margin-left 20px
        .wt-close
          float right
          margin-right 20px
          font-size 36px
          color #9d9d9d
          cursor pointer
      .addcompany
        padding-top 30px
        .demo-ruleForm
          margin 0 auto
          width 290px
          .el-input
          .el-select
            width 100%
            font-size 12px
        .btns
          margin-top 40px
          text-align center
          button
            width 135px

</style>


